<template>
  <div class="myMessagesContainer">
    <el-form>
      <el-form-item label="申请单时间">
        <el-date-picker
          v-model="createTimeRange"
          type="daterange"
          value-format="timestamp"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          :default-time="['00:00:00', '23:59:59']"
          style="width: 300px"
        />
      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%" border stripe>
      <el-table-column prop="body" label="提现流水号" fixed> </el-table-column>
      <el-table-column prop="is_read" label="金额" width="180">
      </el-table-column>
      <el-table-column prop="is_read" label="提现人" width="180">
      </el-table-column>
      <el-table-column prop="is_read" label="是否到账" width="180">
      </el-table-column>
      <el-table-column prop="create_time" label="申请时间" width="180">
        <template slot-scope="scope">
          {{
            new Date(Number(scope.row.create_time) * 1000)
              .toLocaleString()
              .replace(/:\d{1,2}$/, " ")
          }}
        </template></el-table-column
      >
    </el-table>
    <div class="operation">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { reqMyMessagesList, reqMyMessagesDetail } from "@/api/message";
export default {
  name: "cashRecords",
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 20,
      total: 0,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  mounted() {
    // 获取数据并更新表格
    this.getList();
  },
  methods: {
    async getList() {
      // let res = await reqMyMessagesList({
      //   id: this.$route.query.id,
      //   page: this.currentPage + "",
      //   page_size: this.pageSize + "",
      // });
      // if (res.code === 10000) {
      //   this.tableData = res.data.data || [];
      //   this.currentPage = res.data.pagination.page * 1;
      //   this.pageSize = res.data.pagination.page_size * 1;
      //   this.total = res.data.pagination.total * 1;
      // }
    },
    async showDetailDialog(val) {
      let res = await reqMyMessagesDetail({
        message_id: val.id,
      });
      if (res.data.jump_link) {
        this.$confirm(res.data.body, "消息通知", {
          cancelButtonText: "关闭",
          confirmButtonText: "去处理",
          customClass: "dialogClass",
        })
          .then(() => {
            this.getList();
            window.open(res.data.jump_link, "_blank");
          })
          .catch(() => {
            this.getList();
          });
      } else {
        this.$alert(res.data.body, "消息通知", {
          confirmButtonText: "关闭",
          customClass: "dialogClass",

          callback: (action) => {
            this.getList();
          },
        });
      }
    },
    handleCurrentChange(page) {
      // 获取数据
      this.currentPage = page;
      this.getList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
  },
};
</script>

<style lang="less" scoped>
.dialogClass {
  p {
    word-wrap: break-word;
  }
}
.myMessagesContainer {
  padding-top: 20px;
  padding-left: 20px;
  background-color: #fff;
  height: 80vh;
  .operation {
    height: 40px;
    .el-button {
      margin-left: 0px;
      margin-right: 10px;
    }
    ::v-deep .el-pagination {
      float: right;
      margin: 0px 0px 0px 20px;
      .el-input--mini .el-input__inner {
        height: 24px;
      }
    }
  }
}
</style>